<template>
  <div id="menuPermission">
    <v-tableTitle title="用户菜单"></v-tableTitle>
    <div class="menu-tree" :style="`height:${height}` + 'px'">
      <el-card class="menu-tree-card base-card">
        <div slot="header">
          <span>{{ $t('security.userInfo') }}</span>
        </div>
        <el-input class="filter-input" :placeholder="$t('security.inputUserNameSearch')" v-model="filterText" clearable
          suffix-icon="el-icon-search">
        </el-input>
        <el-table :data="tableData" :height="`${height}` - 100" @row-click="rowClick" highlight-current-row ref="table">
          <el-table-column prop="fullname" :label="$t('security.userName')" align="center">
          </el-table-column>
          <el-table-column prop="username" :label="$t('security.userAccount')" align="center">
          </el-table-column>
        </el-table>
        <!--   -->
      </el-card>
    </div>
    <div class="perDetail">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="$t('security.menu')" name="first">
          <el-tree :style="`height:${height1}` + 'px'" :data="treeData" show-checkbox node-key="id"
            :default-checked-keys="checkedKeys" :default-expanded-keys="expandedKeys" :props="defaultProps"
            @check="setCheckedFunc" ref="tree">
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </div>
       <div class="footer">
          <el-button type="primary" @click="save">{{ $t("common.save") }}</el-button>
          <el-button @click="reset">{{ $t('common.reset') }}</el-button>
        </div>
  </div>
</template>

<script>
import {
  queryPermissionList,
  queryAllUserList,
  saveOrDelete
} from '@/api/system/config';
import tableTitle from "@/components/commons/TableTitle";
import table from "commons/Table";
import baseMixin from "@/mixins/BaseMixin";

export default {
  name: "menuPermission",
  mixins: [baseMixin],
  data() {
    return {
      activeName: 'first',
      filterText: '',
      treeData: [],
      expandedKeys: [],
      checkedKeys: [],
      defaultProps: {
        children: 'nodes',
        label: 'name'
      },
      reCheckedKeys: [],
      tableData: [],
      user_id: 0,
      height: 0,
      height1: 0,
    };
  },
  mounted() {
    this.getUser();
    this.height = this.getHeight(window, 120);
    this.height1 = this.getHeight(window, 160);
  },
  components: {
    "v-tableTitle": tableTitle,
    "v-table": table
  },
  methods: {
    rowClick(data, column, e) {
      this.user_id = data.id;
      this.getList();
      // this.getTableDataWsh(this.pageWsh,{});
    },
    setCheckedFunc(data, nodes) {
      console.log(data, nodes);
      this.reCheckedKeys = nodes.checkedKeys;
    },
    getAllCheckedKeys() {
      // 目前被选中的部门节点
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      // 半选中的部门节点
      let halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    save() {
      let checkedArr = this.getAllCheckedKeys();
      let data = {};
      //todo 获取用户id
      data.userId = this.user_id;
      data.checkedList = checkedArr;
      saveOrDelete(data).then(res => {
        this.$message.success(this.$t("app.saveMes"));
        this.getList();
      })
    },
    reset() {
      this.$refs.tree.setCheckedKeys([]);
      // this.$refs.table.setCurrentRow();
      // this.getList();
    },
    getList() {
      queryPermissionList({ userId: this.user_id }).then(res => {
          this.treeData = res.treeList;
          this.checkedKeys = this.getChildKeys(res.treeList, []).filter(key => res.checkedList.includes(key));
      })
    },
    getChildKeys(tree, arr) {
      tree.forEach(element => {
        if (element.node && element.node.length > 0) {
          this.getChildKeys(element.node, arr)
        } else {
          arr.push(element.id)
        }
      });
      return arr
    },
    getUser() {
      queryAllUserList({}).then(res => {
          this.tableData = res.data.data;
      })
    },
  },
  watch: {
    filterText(val) {
      // todo 查询
      if (val && val != null && val.length > 0) {
        queryAllUserList({ username: val }).then(res => {
            this.tableData = res.data.data;
        })
      }
      if (val === "") {
        this.getUser();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#menuPermission {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .menu-tree {
    height: 100%;
    float: left;
    width: 240px;

    .menu-tree-card {

      .el-tree {
        height: 720px;
        overflow-y: scroll;
      }

      .filter-input {
        padding: 8px;
        border-bottom: 1px solid #ebeef5;
        position: relative;

        ::v-deep .el-input__suffix {
          right: 18px;
          top: 3px;

          .el-input__icon {
            font-size: 18px;
          }
        }
      }
    }
  }


  .perDetail {
    width: calc(100% - 250px);
    float: right;
    padding-left: 20px;
    max-height: 800px;
    overflow: hidden;

    ::v-deep .el-tree {
      height: 720px;
      overflow-y: scroll;
    }
  }

  .btn {
    margin-top: 24px;
    padding: 0;
    width: 100%;
    text-align: center;
  }

  ::v-deep .el-dialog__body {
    .el-form {
      padding: 8px;

    }
  }


}
</style>